<template>
  <button
    class="custom-button"
    :class="{
      [`size-${size}`]: true,
      [`variant-${variant}`]: true,
      [`shape-${shape}`]: true,
      'disabled': disabled || loading,
      'loading': loading,
      'block': block,
      'icon-start': icon && !iconEnd,
      'icon-end': icon && iconEnd,
      'icon-only': icon && !label && !loading
    }"
    :disabled="disabled || loading"
    @click="handleClick"
    :style="customStyles"
  >
    <!-- 加载图标 -->
    <view v-if="loading" class="button-loading">
      <uni-loading type="spinner" :size="loadingSize" :color="loadingColor" />
    </view>
    
    <!-- 前置图标 -->
    <uni-icon
      v-else-if="icon && !iconEnd"
      class="button-icon"
      :type="icon"
      :size="iconSize || getIconSizeByButtonSize()"
      :color="iconColor || getIconColorByVariant()"
    />
    
    <!-- 按钮文本 -->
    <view v-if="label" class="button-label">{{ label }}</view>
    
    <!-- 后置图标 -->
    <uni-icon
      v-else-if="icon && iconEnd"
      class="button-icon"
      :type="icon"
      :size="iconSize || getIconSizeByButtonSize()"
      :color="iconColor || getIconColorByVariant()"
    />
    
    <!-- 图标按钮时的图标 -->
    <uni-icon
      v-if="icon && !label && !loading"
      class="button-icon-only"
      :type="icon"
      :size="iconSize || getIconSizeByButtonSize()"
      :color="iconColor || getIconColorByVariant()"
    />
    
    <!-- 波纹效果 -->
    <view v-if="ripple && !disabled && !loading" class="ripple-container">
      <view
        v-for="(ripple, index) in ripples"
        :key="index"
        class="ripple"
        :style="{
          left: ripple.x + 'px',
          top: ripple.y + 'px',
          width: ripple.size + 'px',
          height: ripple.size + 'px',
          opacity: ripple.opacity
        }"
      ></view>
    </view>
  </button>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { themeConfig, themeUtils } from '../../theme/themeConfig';

// 定义props
const props = defineProps({
  // 基本属性
  label: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  iconEnd: {
    type: Boolean,
    default: false
  },
  
  // 状态属性
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  loadingText: {
    type: String,
    default: ''
  },
  loadingSize: {
    type: [String, Number],
    default: 16
  },
  loadingColor: {
    type: String,
    default: ''
  },
  
  // 样式属性
  variant: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'text', 'outline', 'ghost'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['tiny', 'small', 'medium', 'large', 'xlarge'].includes(value)
  },
  shape: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'rounded', 'pill', 'circle'].includes(value)
  },
  block: {
    type: Boolean,
    default: false
  },
  
  // 图标样式
  iconSize: {
    type: [String, Number],
    default: null
  },
  iconColor: {
    type: String,
    default: ''
  },
  
  // 自定义样式
  backgroundColor: {
    type: String,
    default: ''
  },
  textColor: {
    type: String,
    default: ''
  },
  borderColor: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: ''
  },
  paddingHorizontal: {
    type: String,
    default: ''
  },
  paddingVertical: {
    type: String,
    default: ''
  },
  
  // 交互属性
  ripple: {
    type: Boolean,
    default: true
  },
  activeClass: {
    type: String,
    default: ''
  }
});

// 定义事件
const emit = defineEmits(['click', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'focus', 'blur']);

// 波纹效果状态
const ripples = ref([]);

// 计算自定义样式
const customStyles = computed(() => {
  const styles = {};
  
  // 宽度
  if (props.width) {
    styles.width = props.width;
  } else if (props.block) {
    styles.width = '100%';
  }
  
  // 高度
  if (props.height) {
    styles.height = props.height;
  }
  
  // 内边距
  if (props.paddingHorizontal) {
    styles.paddingLeft = props.paddingHorizontal;
    styles.paddingRight = props.paddingHorizontal;
  }
  if (props.paddingVertical) {
    styles.paddingTop = props.paddingVertical;
    styles.paddingBottom = props.paddingVertical;
  }
  
  // 背景颜色
  if (props.backgroundColor) {
    styles.backgroundColor = props.backgroundColor;
  }
  
  // 文本颜色
  if (props.textColor) {
    styles.color = props.textColor;
  }
  
  // 边框颜色
  if (props.borderColor && ['outline', 'ghost'].includes(props.variant)) {
    styles.borderColor = props.borderColor;
  }
  
  // 加载颜色
  if (props.loadingColor) {
    styles.setProperty = '--loading-color', props.loadingColor;
  }
  
  return styles;
});

// 根据按钮大小获取图标大小
function getIconSizeByButtonSize() {
  const sizeMap = {
    tiny: 12,
    small: 14,
    medium: 16,
    large: 20,
    xlarge: 24
  };
  return sizeMap[props.size] || 16;
}

// 根据变体获取图标颜色
function getIconColorByVariant() {
  if (['text', 'outline', 'ghost'].includes(props.variant)) {
    return themeUtils.getColor(props.variant === 'text' ? 'primary' : props.variant, 'base');
  }
  return themeUtils.getColor(props.variant, 'contrast') || '#FFFFFF';
}

// 处理点击事件
function handleClick(event) {
  if (!props.disabled && !props.loading) {
    if (props.ripple) {
      createRipple(event);
    }
    emit('click', event);
  }
}

// 创建波纹效果
function createRipple(event) {
  const button = event.currentTarget;
  const rect = button.getBoundingClientRect();
  const size = Math.max(rect.width, rect.height);
  const x = event.clientX - rect.left - size / 2;
  const y = event.clientY - rect.top - size / 2;
  
  const newRipple = {
    x,
    y,
    size,
    opacity: 0.3
  };
  
  ripples.value.push(newRipple);
  
  // 动画效果
  setTimeout(() => {
    newRipple.opacity = 0;
    setTimeout(() => {
      const index = ripples.value.indexOf(newRipple);
      if (index > -1) {
        ripples.value.splice(index, 1);
      }
    }, 600);
  }, 10);
}

// 监听加载状态，清除波纹
watch(() => props.loading, (isLoading) => {
  if (isLoading) {
    ripples.value = [];
  }
});
</script>

<style scoped>
/* 基础按钮样式 */
.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  outline: none;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 尺寸变体 */
.custom-button.size-tiny {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 4px;
}

.custom-button.size-small {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
}

.custom-button.size-medium {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 8px;
}

.custom-button.size-large {
  height: 48px;
  padding: 0 20px;
  font-size: 16px;
  border-radius: 8px;
}

.custom-button.size-xlarge {
  height: 56px;
  padding: 0 24px;
  font-size: 18px;
  border-radius: 12px;
}

/* 形状变体 */
.custom-button.shape-rounded {
  border-radius: 8px;
}

.custom-button.shape-pill {
  border-radius: 9999px;
}

.custom-button.shape-circle {
  border-radius: 50%;
  padding: 0 !important;
  width: var(--button-size, 40px);
  height: var(--button-size, 40px);
}

.custom-button.size-tiny.shape-circle {
  --button-size: 24px;
}

.custom-button.size-small.shape-circle {
  --button-size: 32px;
}

.custom-button.size-large.shape-circle {
  --button-size: 48px;
}

.custom-button.size-xlarge.shape-circle {
  --button-size: 56px;
}

/* 块级按钮 */
.custom-button.block {
  display: flex;
  width: 100%;
}

/* 图标位置 */
.custom-button.icon-start .button-label {
  margin-left: 8px;
}

.custom-button.icon-end .button-label {
  margin-right: 8px;
}

.custom-button.icon-only {
  padding: 0 !important;
  width: var(--button-size, 40px);
  height: var(--button-size, 40px);
}

/* 变体样式 */

/* 主按钮 */
.custom-button.variant-primary {
  background-color: #2196F3;
  color: #FFFFFF;
}

.custom-button.variant-primary:hover:not(.disabled):not(.loading) {
  background-color: #1976D2;
}

/* 次要按钮 */
.custom-button.variant-secondary {
  background-color: #FF9800;
  color: #FFFFFF;
}

.custom-button.variant-secondary:hover:not(.disabled):not(.loading) {
  background-color: #F57C00;
}

/* 成功按钮 */
.custom-button.variant-success {
  background-color: #4CAF50;
  color: #FFFFFF;
}

.custom-button.variant-success:hover:not(.disabled):not(.loading) {
  background-color: #388E3C;
}

/* 警告按钮 */
.custom-button.variant-warning {
  background-color: #FFC107;
  color: #212121;
}

.custom-button.variant-warning:hover:not(.disabled):not(.loading) {
  background-color: #FFA000;
}

/* 错误按钮 */
.custom-button.variant-error {
  background-color: #F44336;
  color: #FFFFFF;
}

.custom-button.variant-error:hover:not(.disabled):not(.loading) {
  background-color: #D32F2F;
}

/* 信息按钮 */
.custom-button.variant-info {
  background-color: #00BCD4;
  color: #FFFFFF;
}

.custom-button.variant-info:hover:not(.disabled):not(.loading) {
  background-color: #0097A7;
}

/* 文本按钮 */
.custom-button.variant-text {
  background-color: transparent;
  color: #2196F3;
}

.custom-button.variant-text:hover:not(.disabled):not(.loading) {
  background-color: rgba(33, 150, 243, 0.1);
}

/* 描边按钮 */
.custom-button.variant-outline {
  background-color: transparent;
  color: #2196F3;
  border: 1px solid #2196F3;
}

.custom-button.variant-outline:hover:not(.disabled):not(.loading) {
  background-color: rgba(33, 150, 243, 0.1);
}

/* 幽灵按钮 */
.custom-button.variant-ghost {
  background-color: transparent;
  color: #212121;
  border: 1px solid transparent;
}

.custom-button.variant-ghost:hover:not(.disabled):not(.loading) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 禁用状态 */
.custom-button.disabled,
.custom-button.loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* 按钮文本 */
.button-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 按钮图标 */
.button-icon,
.button-icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 加载状态 */
.button-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 波纹效果容器 */
.ripple-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* 波纹效果 */
.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: currentColor;
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  opacity: 0.3;
}

/* 波纹动画 */
@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 其他变体的描边颜色 */
.custom-button.variant-outline.variant-secondary {
  color: #FF9800;
  border-color: #FF9800;
}

.custom-button.variant-outline.variant-secondary:hover:not(.disabled):not(.loading) {
  background-color: rgba(255, 152, 0, 0.1);
}

.custom-button.variant-outline.variant-success {
  color: #4CAF50;
  border-color: #4CAF50;
}

.custom-button.variant-outline.variant-success:hover:not(.disabled):not(.loading) {
  background-color: rgba(76, 175, 80, 0.1);
}

.custom-button.variant-outline.variant-warning {
  color: #FFC107;
  border-color: #FFC107;
}

.custom-button.variant-outline.variant-warning:hover:not(.disabled):not(.loading) {
  background-color: rgba(255, 193, 7, 0.1);
}

.custom-button.variant-outline.variant-error {
  color: #F44336;
  border-color: #F44336;
}

.custom-button.variant-outline.variant-error:hover:not(.disabled):not(.loading) {
  background-color: rgba(244, 67, 54, 0.1);
}

.custom-button.variant-outline.variant-info {
  color: #00BCD4;
  border-color: #00BCD4;
}

.custom-button.variant-outline.variant-info:hover:not(.disabled):not(.loading) {
  background-color: rgba(0, 188, 212, 0.1);
}

/* 文本按钮变体颜色 */
.custom-button.variant-text.variant-secondary {
  color: #FF9800;
}

.custom-button.variant-text.variant-secondary:hover:not(.disabled):not(.loading) {
  background-color: rgba(255, 152, 0, 0.1);
}

.custom-button.variant-text.variant-success {
  color: #4CAF50;
}

.custom-button.variant-text.variant-success:hover:not(.disabled):not(.loading) {
  background-color: rgba(76, 175, 80, 0.1);
}

.custom-button.variant-text.variant-warning {
  color: #FFC107;
}

.custom-button.variant-text.variant-warning:hover:not(.disabled):not(.loading) {
  background-color: rgba(255, 193, 7, 0.1);
}

.custom-button.variant-text.variant-error {
  color: #F44336;
}

.custom-button.variant-text.variant-error:hover:not(.disabled):not(.loading) {
  background-color: rgba(244, 67, 54, 0.1);
}

.custom-button.variant-text.variant-info {
  color: #00BCD4;
}

.custom-button.variant-text.variant-info:hover:not(.disabled):not(.loading) {
  background-color: rgba(0, 188, 212, 0.1);
}

/* 触摸反馈 */
.custom-button:active:not(.disabled):not(.loading) {
  transform: translateY(1px);
}

/* 响应式调整 */
@media (max-width: 360px) {
  .custom-button.size-large {
    height: 44px;
    font-size: 15px;
  }
  
  .custom-button.size-xlarge {
    height: 52px;
    font-size: 16px;
  }
  
  .custom-button.icon-start .button-label,
  .custom-button.icon-end .button-label {
    margin-left: 6px;
    margin-right: 6px;
  }
}
</style>